let scoreChart = echarts.init(document.getElementById('stat-ecart'))
let scoreChartOption = {
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        top:'60',
        left:'50%',
        itemWidth :'10',
        itemHeight:'10',
        hoverAnimation:false,
        data:[
        {value:255, name:'已注册',pie:"38%"},
        {value:253, name:'已拆除',pie:"28%"},
        {value:32,  name:'已迁移',pie:"20%"}
      ],
      textStyle:{
        color:'#ffffff'
      },
      borderRadius:'0',
      formatter:function(name){
        return name
      }
    },
    color:['#b02754','#0eab76','#1b5ec1'],
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            center:['20%','50%'],
            avoidLabelOverlap: false,
            hoverAnimation:false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:255, name:'已注册',pie:"38%"},
                {value:253, name:'已拆除',pie:"28%"},
                {value:32,  name:'已迁移',pie:"20%"}
            ]
        }
    ]
};
scoreChart.setOption(scoreChartOption);



//区域边界统计
let areaChart = echarts.init(document.getElementById('area-chart'))
let data=['北京','山东','内蒙古', '江苏', '浙江', '上海', '安徽', '福建', '江西', '广东', '广西',
          '海南', '河南', '湖南', '湖北', '天津', '河北', '山西', '宁夏', '青海', '陕西', '甘肃', '新疆', '四川', '贵州', '云南', '重庆', '西藏', '辽宁', '吉林', '黑龙江', '新疆兵团'];
let arr=[];
let lenddata=['全部', '网闸','路由器','双网卡','代理网关','VPN','防火墙']
lenddata.forEach((value,index)=>{
    arr.push(
      {
        name: value,
        type: 'bar',
        stack: '总量',
        label: {
            normal: {
                show: false,
                position: 'insideRight'
            }
        },
        data: [320, 302, 301, 334, 390, 330, 320,320, 302, 301, 334, 390, 330, 320,320, 302, 301, 334, 390, 330, 320,320, 302, 301, 334, 390, 330, 320,320, 302, 301, 334]
    },   
    )
  return arr
})
let areaChartOption={
  color: ['#3398DB'],
  tooltip : {
      trigger: 'axis',
      axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
  },
  legend: {
    right:'0',
    data: ['全部', '网闸','路由器','双网卡','代理网关','VPN','防火墙'],
    textStyle:{
      color:'#ffffff'
    },
    padding:[
      20,
      10,
      10,
      20
    ]
    
},
  grid: {
      left: '0%',
      right: '0%',
      bottom: '3%',
      containLabel: true
  },
  xAxis : [
      {
          type : 'category',
          data : data,
          axisTick: {
              alignWithLabel: true
          },
          axisLabel:{
            textStyle:{
              color:'#ffffff'
            }
          },
          axisLine:{  
            lineStyle:{  
                color:'#0087ED',  
                width:1,//这里是为了突出显示加上的  
            }  
        }  

      }
  ],
  yAxis : [
      {
          type : 'value',
          axisLabel:{
            textStyle:{
              color:'#ffffff'
            }
          },
          splitLine: {  
            lineStyle: {  
                // 使用深浅的间隔色  
                color: ['#1c264a']  
            }  
        },
          axisLine:{  
            lineStyle:{  
                width:0,//这里是为了突出显示加上的  
            }  
        } 
      },

      
  ],
  color:['#881fdf','#2644b9','#3aa4d2','#1875f0','#f18f1c','#5553ce','#1ca534'],
  series :arr
};
areaChart.setOption(areaChartOption);


function fn(){
  var oList=document.getElementById('list');
  var tump='';
  for(var i=0;i<60;i++){
    var aLi=document.createElement('li');
    oList.appendChild(aLi);

    tump+='#wrap ul li:nth-child('+(i+1)+'){transform: rotate('+(i+1)*6+'deg);}';
    oSty.innerHTML+=tump;
}
}